<template>
  <uni-popup ref="popup" :type="type" @change="handleChange" @close="handleClose" :mask-click="closeable">
    <view class="title" v-if="title">{{ title }}</view>
    <view class="popup-list" v-if="actions.length">
      <view
          class="popup-list-item"
          v-for="(item, index) in actions"
          :key="index"
          :style="{ color: item.color || '#333' }"
          @click="handleClick(item, index)">
        {{ item.name }}
      </view>
    </view>
    <slot></slot>
  </uni-popup>
</template>

<script setup>
import { ref, watch } from 'vue';
import { parse, stringify } from '@/assets/js/util';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'bottom'
  },
  closeable: {
    type: Boolean,
    default: true
  },
  actions: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['update:modelValue', 'select', 'close']);

const popup = ref(null);

watch(() => props.modelValue, (val) => {
  console.log(`=>(van-action-sheet.vue:50) val`, val);
  if (val) {
    open();
  } else {
    closed();
  }
});

const handleChange = ({ show, type }) => {
  emit('update:modelValue', show);
};
const handleClose = () => {
  emit('close');
};


const handleClick = (item, index) => {
  emit('select', item, index);
};

const open = () => {
  popup.value.open();
};

const closed = () => {
  popup.value.close();
};
</script>

<style lang="scss" scoped>
    .uni-popup {
		z-index: 9999;
		.title{
			font-size: 20px;
			line-height: 36px; 
			font-weight: 500;
			text-align: center;
		}
    :deep(.uni-popup__wrapper){
			background-color: #fff !important;
			border-radius: 16px 16px 0 0;
		}
		.popup-list{
			background: #fff;
			padding: 4px 0;
		}
		.popup-list-item{
			font-size: 14px;
			line-height: 48px; 
			text-align: center;
		}
    }
</style>